<template>
  <div class="bussiness">
    <div class="container">
      <div class="header">
        <img :src="bussinessDetail.user.headImgUrl" alt="" />
        <div class="right">
          <p>{{ bussinessDetail.user.nickname }}</p>
          <p>{{ bussinessDetail.user.company }}</p>
        </div>
      </div>
      <div class="content">
        <div class="detail">
          <span class="label">{{ getLabelText(bussinessDetail.type) }}</span>
          <span>{{ bussinessDetail.content }}</span>
        </div>
        <div class="tag-list" v-if="bussinessDetail.labelList && bussinessDetail.labelList.length">
          <span v-for="(todo, k) in bussinessDetail.labelList" :key="k">{{ todo }}</span>
        </div>
        <div class="img-list" v-if="bussinessDetail.pictureList">
          <van-image fit="cover" @click.stop="previewImg(index)" v-for="(item, index) in bussinessDetail.pictureList" :key="index" :src="item" width="100" height="100" />
        </div>
      </div>
      <div class="footer van-hairline--top">
        <span>{{ bussinessDetail.createTime }} 阅读 {{ bussinessDetail.readNum }}</span>
        <ul v-if="!isShare">
          <li @click.stop="handleCollect">
            <span :style="{ color: bussinessDetail.isCollect ? '#fe9100' : '' }">{{ bussinessDetail.isCollect === 1 ? '取消收藏' : '收藏' }}</span>
            <img v-if="bussinessDetail.isCollect === 1" src="@assets/images/collect_selected.png" alt="" />
            <img v-else src="@assets/images/collect.png" alt="" />
          </li>
          <li @click="handleShare">
            <span>分享</span>
            <img src="@assets/images/share.png" alt="" />
          </li>
        </ul>
      </div>
    </div>
    <van-button color="#FE9100" block class="delivery-btn" @click="deliveryCard" v-if="!isShare && bussinessDetail.isSelfPublish === 0">投递名片</van-button>
  </div>
</template>

<script>
import { mapGetters } from 'vuex';
import { Button, Toast, Image, Dialog, ImagePreview } from 'vant';
import Empty from '@components/empty';
import { business_deliveryCard, business_getBusinessDetail, business_collectBusiness, business_cancelCollect } from '@api/bussiness';
export default {
  components: {
    [Button.name]: Button,
    [Image.name]: Image
  },
  data() {
    return {
      bussinessDetail: { user: {} },
      id: this.$route.query.id,
      isShare: this.$route.query.isShare ? this.$route.query.isShare : false
    };
  },
  computed: {
    ...mapGetters(['bussinessTypeList'])
  },
  mounted() {
    this.getBussinessDetail();
    this.wxJssdk.wxShare({
      title: 'Hi,朋友,给你推荐一个新的商机',
      desc: '我一直在用腾云企服，想邀请您来一起体验',
      link: `${location.href}&isShare=1`,
      imgUrl: 'https://tyqf-bucket.oss-cn-beijing.aliyuncs.com/other/custCenterLogo.jpg'
    });
  },
  methods: {
    getLabelText(id) {
      if (!id) return '';
      return this.bussinessTypeList.find(item => {
        return item.id === id;
      }).text;
    },
    handleShare() {
      Toast('请点击微信右上角进行分享');
    },
    async handleCollect() {
      if (!this.$store.state.token) {
        Dialog.confirm({
          title: '您还未实名，是否立即进行实名',
          confirmButtonColor: '#f09637',
          confirmButtonText: '立即实名',
          cancelButtonText: '暂不实名'
        }).then(() => {
          this.$router.openPage('/login');
        });
      } else {
        let res = '';
        if (this.bussinessDetail.isCollect === 1) {
          res = await business_cancelCollect({ businessId: this.id });
        } else {
          res = await business_collectBusiness({ businessId: this.id });
        }
        if (res.code === 200) {
          this.bussinessDetail.isCollect = 1 - this.bussinessDetail.isCollect;
        } else {
          Toast(res.msg);
        }
      }
    },
    async deliveryCard() {
      if (!this.$store.state.token) {
        Dialog.confirm({
          title: '您还未实名，是否立即进行实名',
          confirmButtonColor: '#f09637',
          confirmButtonText: '立即实名',
          cancelButtonText: '暂不实名'
        }).then(() => {
          this.$router.openPage('/login');
        });
      } else {
        let res = await business_deliveryCard({ businessId: this.id });
        if (res.code === 200) {
          Toast('名片投递成功');
        } else {
          Toast(res.msg);
        }
      }
    },
    previewImg(index) {
      let arr = this.bussinessDetail.pictureList.map(item => {
        return item.split('?')[0];
      });
      ImagePreview({
        images: arr,
        startPosition: index
      });
    },
    async getBussinessDetail() {
      let res = await business_getBusinessDetail({ businessId: this.id });
      if (res.code === 200) {
        this.bussinessDetail = res.data;
      } else {
        Toast(res.msg);
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.bussiness {
  background: #fff;
  padding-bottom: 150px;
}

.container {
  padding: 30px;
  margin-bottom: 36px;
  .header {
    display: flex;
    align-items: center;
    img {
      width: 76px;
      height: 76px;
      border-radius: 50%;
      margin-right: 18px;
    }
    .right {
      font-size: 22px;
      color: #818b9d;
      p:first-child {
        font-size: 28px;
        font-weight: bold;
        color: #121c32;
        margin-bottom: 13px;
      }
    }
  }
  .content {
    margin: 25px 0;
    .img-list {
      display: flex;
      flex-wrap: wrap;
      .van-image {
        margin: 0 15px 15px 0;
      }
    }
    .detail {
      color: #121c32;
      font-size: 30px;
      line-height: 46px;
    }
    .label {
      background: #f4be88;
      width: 108px;
      height: 36px;
      text-align: center;
      line-height: 36px;
      display: inline-block;
      color: #53360e;
      font-size: 22px;
      border-radius: 3px;
      margin-right: 20px;
    }
    .tag-list {
      display: flex;
      flex-wrap: wrap;
      margin-bottom: 20px;
      span {
        padding: 8px 18px;
        color: #35a6fb;
        background: #ebf7fd;
        border-radius: 18px;
        font-size: 22px;
        margin: 15px 15px 0 0;
      }
    }
  }
  .footer {
    display: flex;
    justify-content: space-between;
    font-size: 22px;
    color: #818b9d;
    padding: 24px 0;
    ul {
      display: flex;
      li {
        display: flex;
        align-items: center;
        margin-left: 24px;
      }
      img {
        width: 24px;
        margin-left: 10px;
      }
    }
  }
}
.delivery-btn {
  width: calc(100% - 66px);
  position: fixed;
  bottom: 60px;
  left: 33px;
  font-size: 30px;
  font-weight: bold;
  box-shadow: 0px 12px 28px 1px rgba(254, 145, 0, 0.3);
  border-radius: 6px;
}
</style>
